<template>
	<view class="headimg">
		<!-- <van-image round width="8rem" height="8rem" :src="avator ? avator : 'https://img.yzcdn.cn/vant/cat.jpeg'" -->
		<!-- 		<van-image round width="8rem" height="8rem" :src="avator"
			custom-class="my-custom-class" @click="getimg" /> -->
		<view class="cu-avatar img round margin-left" :style="{ 'background-image': 'url(' + avator + ')' }"
			@click="getimg"></view>
	</view>
	<view>
		<form class="form">
			<view class="cu-form-group">
				<view class="title">昵称</view>
				<input v-model='Name' name="input" :disabled='transe' />
			</view>
			<view class="cu-form-group">
				<view class="title">手机号</view>
				<input v-model='phonenumber' name="input" :disabled='transe' />
			</view>
			<view class="cu-form-group">
				<view class="title">性别</view>
				<input v-model='sex' name="input" :disabled='transe' />
			</view>
		</form>
	</view>
	<view class="btn">
		<button class="cu-btn bg-cyan shadow" @click="tranT" v-if='transe'>点击编辑</button>
		<button class="cu-btn bg-gradual-blue shadow" @click="tranF" v-else>点击保存</button>
	</view>
</template>

<style scoped>
	.cu-form-group .title {
		min-width: calc(4em + 15rpx);
	}

	.cu-form-group {
		margin-top: 30rpx;
	}

	.form {
		position: relative;
		z-index: 5;
	}

	.btn {
		width: 100%;
		text-align: center;
		margin: 50rpx auto;
	}

	.bg {
		width: 100%;
		height: 1103rpx;
		position: absolute;
		z-index: 0;
	}

	.headimg {
		position: relative;
		padding-top: 20%;
		text-align: center;
	}

	.img {
		margin: 0 auto;
		width: 40vw;
		height: 40vw;
	}
</style>

<script>
	import {
		mapState
	} from 'vuex';
	// import headimg from '@/modul/Aboutme/headimg.vue'
	// import dialog_remind from '@/modul/common/dialog_remind.vue'
	import { 
		getuserInfo,
		putuserInfo,
		uploadimg
	} from '@/store/api.js'
	export default {
		components: {
			// headimg,
			// dialog_remind
		},
		mounted() {
			console.log('这个是avator:      ' + this.avator)
			// 调用 getuserInfo 函数，并使用 Promise 的 then 方法来获取成功获取到的用户信息数据
			getuserInfo().then(data => {
				// console.log('调用')
				console.log("成功获取用户信息：", data);
				this.Name = data.data.userName
				this.avator =data.data.avatar? data.data.avatar:'http://8.146.208.139:4000/avator/orignavator.png'
				this.phonenumber = data.data.phoneNumber
				this.sex = (data.data.sex == 0) ? '男' : '女'
			}).catch(error => {
				console.error("获取用户信息失败：", error);
				uni.showToast({
					title: '获取失败！',
					icon: 'none',
					duration: 2000
				})
			});
		},
		data() {
			return {
				transe: true, //是否可以开启编辑功能
				avator: 'http://8.146.208.139:3000/avator/orignavator.png',
				sex: '',
				Name: '',
				phonenumber: '',
				if_change_avator: false
			}
		},
		methods: {
			getimg() {
				if (this.transe === false) {
					uni.chooseImage({
						count: 1,
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album', 'camera'], //从相册选择
						success: (res) => {
							console.log(res)
							const tempFilePath = res.tempFilePaths[0];
							this.avator = tempFilePath;
							this.if_change_avator = true
							// console.log(tempFilePath)
						},
						fail: (err) => {
							console.log(err)
						}
					})
				}
			},
			tranT() {
				this.transe = !this.transe
			},
			// 编辑之后提交
			uploadmes() {
				// 男0女1
				let data = {
					avatar: this.avator,
					userName: this.Name,
					sex: this.sex==='男' ? 0 : 1,
					phoneNumber:this.phonenumber
				}
				console.log(data)
				putuserInfo(data).then(res => {
					console.log(res)
					this.transe = !this.transe
					console.log('这个是avator:   ' + this.avator)
					uni.showToast({
						title: '修改成功！',
						icon: 'none',
						duration: 2000
					})
				}).catch(err => {
					console.log(err)
					uni.showToast({
						title: '修改失败！',
						icon: 'none',
						duration: 2000
					})
				})
			},
			//点击编辑之后的提交
			tranF() {
				if (this.if_change_avator == true) {
					uploadimg(this.avator).then(res => {
						console.log('这是页面', res)
						let re = JSON.parse(res)
						// console.log(re)
						this.avator = re.data
						this.uploadmes()
						this.if_change_avator = false
					})
				} 
				else {
					this.uploadmes()
				}
			}
		}
	}
</script>